<template>
  <!-- 筛选区 -->
  <transition name="fade">
    <div class="sub-filter" v-if="list.length">
      <div class="item" v-for="item in list" :key="item.id">
        <div class="head">{{ item.name }}：</div>
        <div class="body">
          <a :class="{active:item.propertyName===undefined}" href="javascript:;" @click="getAttrFn(item,{})">全部</a>
          <a
            href="javascript:;"
            :class="{active:item.propertyName===item2.name}"
            v-for="item2 in item.properties"
            :key="item2.id"
            @click="getAttrFn(item,item2)"
            >{{ item2.name }}</a
          >
        </div>
      </div>
    </div>
    <div v-else class="sub-filter">
      <XtxSkeleton class="item" width="800px" height="40px" />
      <XtxSkeleton class="item" width="800px" height="40px" />
      <XtxSkeleton class="item" width="600px" height="40px" />
      <XtxSkeleton class="item" width="600px" height="40px" />
      <XtxSkeleton class="item" width="600px" height="40px" />
    </div>
  </transition>
</template>

<script>
import { computed, inject, reactive, toRef } from 'vue'
export default {
  name: 'SubFilter',
  setup () {
    const subCate = inject('subCate')
    // 需要将数据转为前端自己需要的数据结构
    // 💥💥computed  计算属性是为了每次subCate 发生变化时list会跟着变化
    const brands = reactive(
      // 因为直接用subCate.value.brands赋值给properties方法时，显示的品牌不会随着二级类目切换而改变，因此需要用computed重新计算里面值的变化
      { id: null, name: '品牌', properties: computed(() => subCate.value.brands) }
    )
    // 计算属性内的 subCate 是依赖项，依赖项数据发生变化，computed 会重新计算得到新结果
    const list = computed(() => {
      // 品牌在后端返回的数据中是一个独立的字段，为了方便自己使用，把数据合并到properties属性中
      return [
        brands,
        ...subCate.value.saleProperties
      ]
    })
    // console.log(222, list)
    const sortParams = inject('sortParams')
    const attrs = toRef(sortParams, 'attrs')
    const brandId = toRef(sortParams, 'brandId')
    // 筛选条件每一项点击的函数
    const getAttrFn = (theItem, theItem2) => {
      // 点击时将属性名称给到 item的自定义属性propertyName 上
      theItem.propertyName = theItem2.name
      // 品牌的筛选
      if (theItem.name === '品牌') {
        brandId.value = theItem2.id
        return
      }
      // 除品牌之外的筛选，找出是否存在属性组名称相同的项
      const index = attrs.value.findIndex(item => item.groupName === theItem.name)
      if (index === -1) {
        // 如果没有，在attrs中添加该项到数组中
        attrs.value.push({ groupName: theItem.name, propertyName: theItem.propertyName })
      } else {
        // 如果有，则修改对应的属性的名称
        attrs.value[index].propertyName = theItem.propertyName
      }
      // 对属性值为full和undefined的项进行过滤
      attrs.value = attrs.value.filter(item => item.propertyName)
    }
    return { list, getAttrFn }
  }
}
</script>

<style scoped lang='less'>
// 筛选区
.sub-filter {
  background: #fff;
  padding: 25px;
  .item {
    display: flex;
    line-height: 40px;
    .head {
      width: 80px;
      color: #999;
    }
    .body {
      flex: 1;
      a {
        margin-right: 36px;
        transition: all 0.3s;
        display: inline-block;
        &.active,
        &:hover {
          color: @xtxColor;
        }
      }
    }
  }
  .xtx-skeleton {
    padding: 10px 0;
  }
}

</style>
